<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #show{
            width: 200px;
            height: 170px;
            border:1px red solid;
            margin: 50px auto;
        }
        input[type='checkbox']{
            margin:5px 10px;
        }
    </style>
</head>
<body>
    <div id='show'></div>   
</body>
</html>
<script src="./jquery_2/lib/jquery.min.js"></script>
<script>
    //初始化位置及其编号
    let pai=1,hao=1;
    for(let i=1;i<=42;i++){
      $("#show").append(`<input type="checkbox" id='${pai}-${hao}'/>`);
      if(hao%6==0){
        hao=1;
        pai++;
       }else{
        hao++;  
       } 
    }
    //保存选中的位置
    let xuan=[];
    $("#show").on('click','input[type="checkbox"]',(e)=>{
        //console.log(e.target.checked,e.target.id);
         if(e.target.checked){
            //大于4个位置给出提示，并把选中状态改了false
            if(xuan.length<4){
                //把选中的添加到数组中
                xuan.push(e.target.id);
            }else{
                alert('最多选4个座位')
                e.target.checked=false;
            }
         }else{
            //得到该元素的下标
           let index= xuan.indexOf(e.target.id);
           //删除该元素 
           xuan.splice(index,1);
         }
         console.log(xuan);
        
    })




</script>